<template>
  <view class="page">
    <view class="card">
      <text class="title">路由与页面跳转 (Router)</text>
      <input v-model="username" placeholder="用户名 (传参示例)" />
      <button @click="goRegister">navigateTo (保留当前)</button>
      <button @click="redirectTo">redirectTo (关闭当前)</button>
      <button @click="reLaunch">reLaunch (关闭所有)</button>
      <button @click="switchTab">switchTab (切换 tabBar)</button>
      <button @click="goBack">navigateBack (返回)</button>
      <view class="hint">查看控制台与页面 onLoad 来观察传参与生命周期（示例页面: pages/Register/Register.vue）</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    goRegister() {
      console.log('goRegister -> username:', this.username);
      const url = this.username ? '/pages/Register/Register?username=' + encodeURIComponent(this.username) : '/pages/Register/Register';
      uni.navigateTo({ url });
    },
    redirectTo() {
      uni.redirectTo({ url: '/pages/Register/Register' });
    },
    reLaunch() {
      uni.reLaunch({ url: '/pages/Register/Register' });
    },
    switchTab() {
      // demo: assume /pages/tabbar/home is a tab page in real project; here we just attempt switchTab for completeness
      uni.switchTab({ url: '/pages/tabbar/home' }).catch(err => console.log('switchTab may fail in this demo:', err));
    },
    goBack() {
      uni.navigateBack({ delta: 1 });
    }
  }
};
</script>
<style scoped>
.page { padding: 20px; }
.card { padding: 12px; background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.title { font-size: 18px; margin-bottom: 8px; display:block; }
input { display:block; margin:6px 0; padding:8px; border:1px solid #ddd; border-radius:4px; }
button { margin: 6px 6px 6px 0; }
.hint { margin-top: 10px; color:#666; font-size:13px; }
</style>
